<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          backIconColor="#333333"
          title-size="36"
          title="我的贡献值"
          height="50"
          :is-back="true"
          :border-bottom="false"
          title-color="#333333"
        >
        </u-navbar>
        <u-gap height="20"></u-gap>
      </view>
      <view class="card count-card dis-flex flex-y-around">
        <view class="count-iten">
          <view class="item-title">当前贡献值</view>
          <view class="item-num">{{ growthInfo.growth }}</view>
        </view>
        <view class="count-iten">
          <view class="item-title">贡献值奖励</view>
          <view class="item-num">{{ growthInfo.bonus }}</view>
        </view>
        <view class="count-iten">
          <view class="item-title dis-flex flex-x-center" @click="ruleShow = true">
            <text class="rule-t">规则说明</text>
            <u-icon name="/static/tishi-b.png" size="28rpx"></u-icon>
          </view>
          <view class="item-num rule-bt" @click="toExchange">兑换为余额</view>
        </view>
      </view>
      <u-gap height="20"></u-gap>
      <view class="card" style="padding: 0 20rpx">
        <u-tabs-swiper
          ref="uTabs"
          :list="tabsList"
          :current="current"
          @change="tabsChange"
          :is-scroll="false"
          :show-bar="false"
          active-color="#10A28F"
          swiper-width="750"
        >
        </u-tabs-swiper>
      </view>
      <u-gap height="20"></u-gap>
      <view class="card" style="padding: 0 20rpx">
        <view class="list-box" v-for="(item, index) in itemList" :key="index">
          <view v-if="current == 0">
            <view class="top dis-flex flex-y-between">
              <view class="cate">{{ item.title }}</view>
              <view class="num" v-if="item.growth < 0">{{ item.growth }}</view>
              <view class="num add" v-else>+{{ item.growth }}</view>
            </view>
            <view class="bottom">
              <view class="date"
                >开通时间：{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}</view
              >
              <view class="date"
                >邀请时间：{{ $u.timeFormat(item.inviteeTime, 'yyyy-mm-dd hh:MM') }}</view
              >
            </view>
          </view>
          <view v-if="current == 1">
            <view class="top dis-flex flex-y-between">
              <view class="cate">{{ item.title }}</view>
              <view class="num" v-if="item.number < 0">{{ (item.number * 0.01).toFixed(2) }}</view>
              <view class="num add" v-else>+{{ (item.number * 0.01).toFixed(2) }}</view>
            </view>
            <view class="bottom">
              <view class="date">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <u-picker v-model="showPiker" :params="params" @confirm="comfirmDate"></u-picker>
    <u-popup v-model="ruleShow" border-radius="20" mode="center" width="600rpx" height="auto">
      <view class="pos-fixed rule-warpper">
        <view class="title">规则说明</view>
        <scroll-view scroll-y="true" style="min-height: 300rpx; max-height: 690rpx">
          <view class="content">
            <u-parse :html="growthInfo.bonusToMoneyTips" />
          </view>
        </scroll-view>
        <view class="colse-bt" @click="ruleShow = false">知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ruleShow: false,
      imgStyle: {
        width: '12rem'
      },
      itemList: [],
      year: '',
      month: '',
      day: '',
      showPiker: false,
      params: {
        year: true,
        month: true,
        day: false
      },
      extra: null,
      title: '今日收益',
      status: '',
      type: '',
      tabsList: [
        {
          name: '贡献值数量明细',
          status: ''
        },
        {
          name: '贡献值奖励明细'
        }
      ],
      current: 0,
      growthInfo: {
        growth: 0,
        bonus: 0,
        bonusToMoneyTips: ''
      }
    }
  },
  onLoad(options) {
    this.$u.get('/app-api/member/growth/overview').then((res) => {
      this.growthInfo = res.data
    })
    this.queryList()
  },
  methods: {
    // toDetail() {
    // 	this.$utils.route('/alliance/order-detail')
    // },
    routeTo(url) {
      this.$utils.route(url)
    },
    tabsChange(index) {
      this.scurrent = index
      this.current = index
      this.queryList()
    },
    queryList(pageNo = 1, pageSize = 10) {
      let url = '/app-api/member/growth/record/page'
      if (this.current == 1) {
        url = '/app-api/pay/bill/page'
      }
      this.$u
        .get(url, {
          pageNo,
          pageSize,
          category: 'bonus'
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
          this.extra = res.data.extra
        })
    },
    toExchange() {
      if (this.growthInfo.bonusBenefitOwned) {
        this.routeTo('/store/exchange')
      } else {
        this.routeTo('/store/open')
      }
    },
    comfirmDate(res) {
      this.year = res.year
      this.month = res.month
      this.queryList()
    }
  }
}
</script>

<style scoped lang="scss">
.card {
  background: #ffffff;
  border-radius: 10rpx;
  margin: 0 20rpx;
  padding: 30rpx 20rpx;
}
.rule_box {
  padding: 45rpx 30rpx 35rpx 30rpx;
  .tl {
    font-weight: 600;
    font-size: 34rpx;
    margin-bottom: 45rpx;
    text-align: center;
  }
  .content {
    font-size: 30rpx;
    line-height: 45rpx;
  }
  .bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    margin: auto;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    margin-top: 35rpx;
    text-align: center;
  }
}

.cell {
  margin-bottom: 20rpx;

  .label {
    font-size: 24rpx;
    color: #333333;
    margin-right: 20rpx;
  }

  .value {
    font-weight: 600;
    font-size: 48rpx;
    color: #333333;
  }

  .cell-right {
    font-size: 24rpx;
    color: #999999;
  }

  .cell-right-1 {
    font-size: 36rpx;
  }

  .cell-right-2 {
    font-size: 24rpx;
    width: 220rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #10a28f;
    border-radius: 28rpx;
    color: #ffffff;
    align-items: center;

    .r-a {
      margin-left: 10rpx;
    }

    .r-b {
      width: 120rpx;
      height: 50rpx;
      background: #d7f5f1;
      border-radius: 25rpx;
      text-align: center;
      font-size: 30rpx;
      color: #ff6f10;
      margin-right: 3rpx;
    }
  }
}

.cell:last-child {
  margin-bottom: 0;
}

.list-box {
  padding: 25rpx 0 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  .top {
    font-size: 28rpx;
    margin-bottom: 20rpx;

    .num {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
      margin-left: 120rpx;
    }

    .add {
      color: #10a28f;
    }
  }

  .bottom {
    font-size: 24rpx;
    color: #999999;
    .y {
      color: #909399;
    }
  }
}

.list-box:last-child {
  border: none;
}

.headView {
  position: sticky;
  background: #fff;
  z-index: 100;
  height: 85rpx;
  top: 0px;
  padding-top: 25rpx;

  .top {
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }

  .bottom {
    font-size: 26rpx;
    color: #999999;
  }
}
.count-card {
  .count-iten {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .item-title {
    font-size: 24rpx;
    color: #333333;
    margin-bottom: 20rpx;
  }
  .item-num {
    font-weight: 500;
    font-size: 48rpx;
    color: #333333;
  }
  .rule-t {
    color: #999999;
    margin-right: 10rpx;
  }
  .rule-bt {
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: #10a28f;
    border-radius: 25rpx;
    font-size: 24rpx;
    color: #ffffff;
    text-align: center;
  }
}
.rule-warpper {
  background: white;
  padding: 30rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: auto;
  border-radius: 20rpx;

  .title {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0;
  }

  .content {
    margin: 30rpx 0 57rpx 0;
  }

  .colse-bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
}
</style>
